<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <form action="">
            姓名：<input type="text" v-model="user.name"><br>
            年龄：<input type="text" v-model="user.age"><br>
            男<input type="radio" value="男" v-model="user.sex">女<input value="女" type="radio" v-model="user.sex"><br>
            <input type="reset" value="重置">
            <input type="button" value="添加" @click="add()">
        </form>
        <table border="1" width="600">
            <thead>
                <tr>
                    <th>全选<input type="checkbox" name="" id="" v-model="allState" @change="checkAll"></th>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                <tr align="center" v-for="(value,key) in users">
                    <td><input type="checkbox" v-model="value.state" @change="checkItem()"></td>
                    <td>{{key+1}}</td>
                    <td>{{value.name}}</td>
                    <td>{{value.age}}</td>
                    <td>{{value.sex}}</td>
                    <td><input type="button" value="删除" @click="remove(key)"></td>
                </tr>
                <tr align="center" v-if="users.length==0">
                    <td colspan="6">暂无数据</td>
                </tr>
                <tr align="center" v-if="users.length!=0">
                    <td colspan="3"><input type="button" value="批量删除" @click="remove(-2)"></td>
                    <td colspan="3"><input type="button" value="全部删除" @click="remove(-1)"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            user: {
                name: "",
                age: "",
                sex: "",
                state: false
            },
            users: [
                { name: "tom", age: 23, sex: "男", state: false },
                { name: "jack", age: 23, sex: "男", state: false }
            ],
            allState: false
        },
        methods: {
            add() {
                //user为引用数据类型，传的是地址
                this.users.push(this.user);
                this.user = {};
                // console.log(this.users)
                this.checkItem();
            },
            remove(index) {
                if (index == -1) {
                    this.users = [];
                } else if(index>=0){
                    this.users.splice(index, 1);
                } else {
                    // for (let i = 0; i < this.users.length; i++) {
                    //     if(this.users[i].state){
                    //         this.users.splice(i,1);
                    //     }
                    // }
                    // 循环中出现了对循环本体数据的操作，该操作是否会影响循环界限
                    // 倒叙循环
                    for (let i = this.users.length-1 ; i>=0 ; i--) {
                        if(this.users[i].state){
                            this.users.splice(i,1);
                        }
                    }
                }
                this.checkItem();
            },
            checkAll() {
                for (let i = 0; i < this.users.length; i++) {
                    this.users[i].state = this.allState;
                }
            },
            checkItem(){
                 // 如果数组中的所有的 元素 state 都为 true this.allState=true
                // 如果数组中只要有一个 元素 state 都为 false this.allState=false
                // this.allState = true;// 假设都为true
                this.allState=this.users.length>0;
                for (let i = 0; i < this.users.length; i++) {
                    if(!this.users[i].state){
                        this.allState=false;
                        return;
                    }
                }
            }
        }
    });
</script>

</html>